<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    	.msgCon {
		    display: inline-block;
		    overflow: hidden;
		    position: relative;
		    height: 1.28rem;
		  background:rgba(0,0,0,.2);
		  
		  width:268px;
		  margin-top:100px;
		}
		.anim{
			transition: transform 2s ease-in-out;
		}
		.msg{
		  width: 30.66rem;
		  height: 1.28rem;
		  display: block;
		}

    </style>



</head>

<body>
    <div class="msgCon">
        <div class="msgs" ">
            <a class="msg"> 
            <span>iPhone关机门是阴谋论？更多爆料</span> 
            </a>

            <a class=" msg "> 
            <span>传OPPO年底进军美国市场？</span> 
            </a>

            <a  class="msg "> 
            <span>三星GalaxyS8传闻汇总 你想知道的都在这 </span> 
            </a>

            <a  class="msg "> 
            <span>iPhone关机门是阴谋论？更多爆料</span> 
            </a>

        </div>
    </div>


       <script>

       !(function(){
       		window.PopSwip = function(){
       			this.msgs = document.querySelector(".msgs");
				this.msg = document.querySelectorAll('.msg');
				this.index = 0;
				this.ty = window.getComputedStyle(this.msg[0])['height'].replace(/px/,'')*-1;
				this._onTransitionEnd = this.onTransistionEnd.bind(this);
				this.start();
       		}
       		PopSwip.prototype = {
       			start:function(){
					this.msgs.addEventListener('transitionend',this._onTransitionEnd);
					setTimeout(this.loop.bind(this),1000);
       			},
       			loop:function(){
					this.index++;
					if(this.index == this.msg.length){
						this.msgs.className = "msgs";
						this.index = 0;
					}else{
						this.msgs.className = "msgs anim";
					}

					this.msgs.style.transform = "translateY("+this.index * this.ty+"px)";

					if(this.index == 0) setTimeout(this.loop.bind(this),0);
				},
				onTransistionEnd:function(){this.loop();},
				stop:function(){
					this.msgs.removeEventListener('transitionend',this._onTransitionEnd);
				}
       		}
       })(window);

       ///use..
       var pop = new PopSwip();

    </script>


</body>

</html>
